<template>
    <div class="page home">
        <div class="content">
            <banner :data="bannerData"></banner>
            <div class="main">
                <booking></booking>
                <introduce></introduce>
            </div>
        </div>
        <van-tabbar v-model="active" route>
            <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
            <van-tabbar-item icon="comment-o" to="/message">信息</van-tabbar-item>
            <van-tabbar-item icon="user-o" to="/user">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import banner from './com/banner.vue';
import booking from './com/booking.vue'
import introduce from './com/introduce.vue'
import { getBannerApi } from '@/api'
const active = ref(0);
const bannerData = ref([]);
 const requestBannerData = async () => {
       // 请求数据
       const {data}= await getBannerApi();
       // 处理数据
      bannerData.value=data
     console.log(data);
   
     }
 requestBannerData()

</script>

<style lang="scss" scoped>
.content {
    width: 100%;
    height: calc(100% - 50px - 46px);
    position: fixed;
    top: 46px;
    bottom: 50px;
    background-color: antiquewhite;
    display: flex;
    flex-direction: column;

    .main {
        flex: 1;
        display: flex;
        flex-direction: column;

        .booking {
            flex: 2
        }

        .introduce {
            flex: 1;
        }

    }

}
</style>